<template>
  <div>
    <div :style="{ height: setting.options.height + 'px' }" :id="id"></div>
  </div>
</template>

<script>
  // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

  import { getGuid } from '@/utils/util'
  import { Pie } from '@antv/g2plot'
  import { Getsqlcolumns } from '@/api/report/api'
  export default {
    name: 'G2Pie',
    props: ['setting'],
    data() {
      return {
        id: getGuid(),
      }
    },
    // 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互
    mounted() {
      var that = this

      Getsqlcolumns({
        DbId: that.setting.options.dbId,
        Sql: that.setting.options.sql,
        isdata: true,
      }).then((res) => {
        console.log('pie', res)
        if (res.isSuccess) {
          const piePlot = new Pie(this.id, {
            data: res.content.data,
            autoFit: true,
            meta: {
              value: {
                alias: '数量',
                formatter: (v) => {
                  return `${v}个`
                },
              },
            },
            angleField: 'value',
            colorField: 'columnKey',
          })
          piePlot.render()
        } else {
          const data = [
            { columnKey: 'Asia', year: '1750', value: 502 },
            { columnKey: 'Asia', year: '1800', value: 635 },
            { columnKey: 'Europe', year: '1750', value: 163 },
            { columnKey: 'Europe', year: '1800', value: 203 },
          ]

          const piePlot = new Pie(this.id, {
            data,
            autoFit: true,
            meta: {
              columnKey: {
                alias: '国家',
                range: [0, 1],
              },
              value: {
                alias: '数量',
                formatter: (v) => {
                  return `${v}个`
                },
              },
            },
            angleField: 'value',
            colorField: 'columnKey',
          })

          piePlot.render()
        }
      })
    },
  }
</script>
